<template>
  <div class="Integrated_Monitoring_SDKRZ">
    <div class="pubBig Privilege">
      <div class="h0">
        <p class="lt"></p>
      </div>
      <div class="dDownMain">
        <div
          class="twoBox"
          :style="this.$route.query.Token ? 'top:50px;left:10px' : 'top: 100px'"
        >
          <el-row style="margin-top:10px">
            <!-- 上部分查询条件 -->
            <el-col :span="18">
              <span style="margin-left:15px">组件：</span>
              <el-select
                filterable
                v-model="value"
                placeholder="请选择"
                size="mini"
              >
                <el-option-group
                  v-for="group in options"
                  :key="group.Name"
                  :label="group.Name"
                >
                  <el-option
                    v-for="item in group.Child"
                    :key="item.Id"
                    :label="'┗ ' + item.Name"
                    :value="item.Id"
                  >
                  </el-option>
                </el-option-group>
              </el-select>
              <span style="margin-left:15px">开始日期：</span>
              <el-date-picker
                v-model="TimeStar"
                type="date"
                placeholder="选择日期"
                size="mini"
              >
              </el-date-picker>
              <span style="margin-left:15px">结束日期：</span>
              <el-date-picker
                size="mini"
                v-model="TimeOto"
                type="date"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-col>
            <!-- 操作按钮 -->
            <el-col :span="6">
              <el-button
                size="small"
                style="float:right;margin-right:50px"
                @click="(value = ''), (TimeStar = ''), (TimeOto = '')"
                >重置</el-button
              >
              <el-button
                size="small"
                style="float:right;margin-right:10px"
                @click="(page.page = 1), getTableData()"
                >查询</el-button
              >
            </el-col>
          </el-row>
          <!-- 表格 -->
          <el-table
            :data="tableData"
            style="width: 100%;margin-top:15px"
            v-loading="isloading"
            border
          >
            <el-table-column
              prop="traceNodeIdentifier.nodeID"
              label="节点编码"
              width="300px"
            >
            </el-table-column>
            <el-table-column prop="componentType" label="模式">
            </el-table-column>
            <el-table-column prop="componentName" label="组件">
            </el-table-column>
            <el-table-column prop="waitTime" label="队列等待时间">
              <template slot-scope="scope">
                {{ scope.row.waitTime + "s" }}
              </template>
            </el-table-column>
            <el-table-column prop="timestamp" label="时间">
              <template slot-scope="scope">
                {{ scope.row.timestamp | dateFormat }}
              </template>
            </el-table-column>
            <el-table-column prop="duration" label="耗时">
              <template slot-scope="scope">
                {{ scope.row.duration + "s" }}
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button size="mini" @click="open(scope.row)">详情</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <div class="block" style="text-align:center">
            <el-pagination
              layout="prev, pager, next"
              :total="page.total"
              :page-size="page.limit"
              @current-change="tableData_change"
            >
            </el-pagination>
          </div>
          <!-- 详情弹层  -->
          <el-dialog
            title="详情"
            :visible.sync="dialogVisible"
            width="45%"
            :before-close="handleClose"
            :append-to-body="true"
            :close-on-click-modal="false"
          >
            <el-table :data="json_list.query" style="width: 100%">
              <el-table-column
                v-for="(item, index) in isTitle_name"
                :key="index"
                :prop="item"
                :label="item"
              >
              </el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
              <el-button @click="handleClose">取 消</el-button>
            </span>
          </el-dialog>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      value: "",
      TimeStar: "",
      TimeOto: "",
      tableData: [],
      page: {
        page: 1,
        limit: 18,
        total: 1,
      },
      isloading: false,
      dialogVisible: false,
      json_list: {},
      isTitle_name: [],
      options: [],
    };
  },
  watch: {
    TimeStar(val) {
      // 格式化开始时间格式
      this.TimeStar = this.dateFormat(val);
    },
    TimeOto(val) {
      // 格式化结束时间格式
      this.TimeOto = this.dateFormat(val);
    },
  },
  methods: {
    getTableData() {
      // 获取表格数据
      let body = {};
      this.isloading = true;
      this.$post(
        "/Monitor/Log/Service?page=" +
          this.page.page +
          "&limit=" +
          this.page.limit +
          "&startTime=" +
          this.TimeStar +
          "&endTime=" +
          this.TimeOto +
          "&componentID=" +
          this.value
      ).then((res) => {
        if (res.code == 0) {
          this.tableData = res.data.list;
          this.page.total = res.data.TotalCount;
          this.isloading = false;
        }
      });
    },
    tableData_change(val) {
      //切换页码
      this.page.page = val;
      this.getTableData();
    },
    dateFormat(val) {
      // 过滤器
      if (val == null || val == "") {
        return "";
      } else {
        let d = new Date(val); // val 为表格内取到的后台时间
        let month =
          d.getMonth() + 1 < 10 ? "0" + (d.getMonth() + 1) : d.getMonth() + 1;
        let day = d.getDate() < 10 ? "0" + d.getDate() : d.getDate();
        let hours = d.getHours() < 10 ? "0" + d.getHours() : d.getHours();
        let min = d.getMinutes() < 10 ? "0" + d.getMinutes() : d.getMinutes();
        let sec = d.getSeconds() < 10 ? "0" + d.getSeconds() : d.getSeconds();
        let times =
          d.getFullYear() +
          "-" +
          month +
          "-" +
          day +
          " " +
          hours +
          ":" +
          min +
          ":" +
          sec;
        return times;
      }
    },
    open(val) {
      // 弹窗开启
      // console.log(val);
      this.isloading = true;
      let companyID = val.componentID;
      let nodeID = val.traceNodeIdentifier.nodeID;
      let traceIndexName = val.traceNodeIdentifier.traceIndexName;
      let traceID = val.traceNodeIdentifier.traceID;
      this.$post(
        "/Monitor/Log/ServiceInfo?companyID=" +
          companyID +
          "&nodeID=" +
          nodeID +
          "&traceIndexName=" +
          traceIndexName +
          "&traceID=" +
          traceID
      ).then((res) => {
        console.log(res);
        if (res.code == 0) {
          // this.json_list = res.data
          var data = JSON.parse(res.data).body;
          this.json_list = JSON.parse(data);
          console.log(this.json_list);
          this.isTitle_name = [];
          let arr = this.json_list.query[0];
          for (var j in arr) {
            // console.log(j);
            this.isTitle_name.push(j);
          }
          this.isloading = false;
          this.dialogVisible = true;
        }
      });
    },
    handleClose() {
      // 弹窗关闭
      this.dialogVisible = false;
    },
    getOptions() {
      // 获取组件下拉框数据
      this.$get("/Monitor/Log/ServiceOptions").then((res) => {
        if (res.code == 0) {
          this.options = res.data;
        }
      });
    },
  },
  mounted() {
    // document.getElementById("2").focus();
  },
  created() {
    if (this.$route.query.Token) {
      localStorage.setItem("Token", this.$route.query.Token);
    }
    this.getTableData();
    this.getOptions();
  },
  filters: {
    dateFormat(val) {
      // 时间过滤器
      if (val == null || val == "") {
        return "";
      } else {
        let d = new Date(val); // val 为表格内取到的后台时间
        let month =
          d.getMonth() + 1 < 10 ? "0" + (d.getMonth() + 1) : d.getMonth() + 1;
        let day = d.getDate() < 10 ? "0" + d.getDate() : d.getDate();
        let hours = d.getHours() < 10 ? "0" + d.getHours() : d.getHours();
        let min = d.getMinutes() < 10 ? "0" + d.getMinutes() : d.getMinutes();
        let sec = d.getSeconds() < 10 ? "0" + d.getSeconds() : d.getSeconds();
        let times =
          d.getFullYear() +
          "-" +
          month +
          "-" +
          day +
          " " +
          hours +
          ":" +
          min +
          ":" +
          sec;
        return times;
      }
    },
  },
};
</script>
<style lang="scss">
.Integrated_Monitoring_SDKRZ {
  .top-input {
    display: inline-block;
    width: 350px;
  }

  .box-top {
    margin-top: 15px;
    margin-left: 5px;
  }
}
</style>
